import DocCardBox from "@/components/doc-card"
import React from "react"
import { Demo, demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "default",
        hash: "slt-l-demo1",
        coms: [<Demo key={0} label="基本使用" />],
        comsJson: [demoJson('label="基本使用"')]
        // desc: [{ text: "slt_1_1_1" }]
    },
    {
        titleKey: "disabled",
        hash: "slt-l-demo2",
        coms: [<Demo key={0} label="禁用" disabled={true} />],
        comsJson: [demoJson('label="禁用" disabled')]
    },
    {
        titleKey: "选中图标",
        hash: "slt-l-demo3",
        coms: [<Demo key={0} selectedIcon label="显示选中图标" />],
        comsJson: [demoJson('selectedIcon label="显示选中图标"')]
        // desc: [{ text: "slt_2_1_1" }]
    },
    {
        titleKey: "多选",
        hash: "slt-l-demo4",
        coms: [<Demo key={0} multiple placeholder="多选" />],
        comsJson: [demoJson('multiple placeholder="多选"')]
        // desc: [{ text: "slt_3_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "readonly",
        hash: "slt-r-demo1",
        coms: [<Demo key={0} label="只读" readOnly={true} />],
        comsJson: [demoJson('label="只读" readOnly')]
    },
    {
        titleKey: "自定义数据源的key值",
        hash: "slt-r-demo2",
        coms: [<Demo key={0} labelKey="dataLabel" valueKey="dataValue" autoKey={true} />],
        comsJson: [demoJson('labelKey="dataLabel" valueKey="dataValue"', true)]
        // desc: [{ text: "slt_4_1_1" }]
    },
    {
        titleKey: "size",
        hash: "slt-r-demo3",
        coms: [<Demo key={0} size="small" label="小尺寸" />],
        comsJson: [demoJson('size="small" label="小尺寸"')]
        // desc: [{ text: "slt_5_1_1" }]
    },
    {
        titleKey: "可搜索",
        hash: "slt-r-demo4",
        coms: [<Demo key={0} showSearch placeholder="可搜索" />],
        comsJson: [demoJson('showSearch placeholder="可搜索"')]
        // desc: [{ text: "slt_6_1_1" }]
    }
]

function InputDoc() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "SelectProps",
            data: [
                {
                    schema: "options",
                    type: "OptionItem[]",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_slt_1")
                },
                {
                    schema: "showSearch",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_slt_2")
                },
                {
                    schema: "multiple",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_slt_3")
                },
                {
                    schema: "searchEmpty",
                    type: "ReactNode",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_slt_4")
                },
                {
                    schema: "showSuffix",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_slt_5")
                },
                {
                    schema: "onSelect",
                    type: "(options?: OptionItem, selected?: string) => void",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_slt_6")
                },
                {
                    schema: "selectedIcon",
                    type: "ReactElement",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_slt_7")
                },
                {
                    schema: "onChange",
                    type: "(e) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("change_event")
                },
                {
                    schema: "classNames",
                    type: "SelectClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("classnames")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Select" desc="selectDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default InputDoc
